<template>
  <a-modal :open="open" width="760px" title="更换病区" centered @cancel="onCancel" @ok="onOk">
    <div class="w-full flex">
      <div class="w-2/5 mr-4">
        <BedCard :data="data" class-name="flex-center py-8" active />
      </div>
      <div class="w-3/5 border-l-2">
        <a-form :model="formState" class="mt-4">
          <a-form-item label="原病区" class="w-full">
            <a-input v-model:value="formState.wardName" disabled placeholder="原病区" />
          </a-form-item>
          <a-form-item label="新病区" class="w-full">
            <SelectArea v-model:value="formState.newWardId" post-url :post-params="{ wardTypeCodes: ['QYLB001', 'QYLB002'] }" allow-clear />
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import BedCard from '@/components/business/BedCard'

const props = defineProps({
  open: Boolean,
  data: {
    type: Object,
    default: () => ({})
  }
})

const formState = ref({})
const emit = defineEmits(['update:open', 'success'])

const onOk = async () => {
  if (!formState.value.newWardId) return message.error('请选择新病区')
  const { code, msg } = await post('/inp/zydj/transferredDistrict', formState.value)
  if (code !== 0) return message.error(msg || '操作失败')
  message.success(msg || '更换成功')
  onCancel()
  emit('success')
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      formState.value = {}
      formState.value = { ...props.data }
    }
  }
)
const onCancel = () => {
  emit('update:open', false)
}
</script>
